<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"  />
		<title>项目实战-响应式导航条</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style>
			.a{
				height: 50px;
				width: 100px;
				border:1px solid #ccc;
				background: #eee;
			}
			a:focus{
				outline: none;
			}
			.nav-pills{
				width: 150px;
			}
			.nav-pills.affix{
				top:30px;
			}
			#myCarousel{
				margin: 50px 0 0 0;
				background: purple;
			}
			.carousel-inner img{
				margin: 0 auto;
			}
			.carousel-control{
				font-size: 100px;
			}
		</style>
	</head>
	<body>
		
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<a href="#" class="navbar-brand" >品牌LOGO</a>
					<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse" id="navbar-collapse">
					<ul class="nav navbar-nav navbar-right" style="margin-top: 0;">
						<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
						<li><a href="#"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>
						<li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
						<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
					</ul>
				</div>
				
			</div>
		</nav>
		<div id="myCarousel" class="carousel slide">
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active">
					<img src="../images/01.jpg" alt="第一张" />
				</div>
				<div class="item">
					<img src="../images/02.jpg"" alt="第二张" />
				</div>
				<div class="item">
					<img src="../images/03.jpg"" alt="第三张" />
				</div>
			</div>
			<a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>
			<a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
		</div>
		
		<script src="jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script>
			//设置自动播放
			$('#myCarousel').carousel({
				interval:4000
			})
			//设置垂直居中
			$('.carousel-control').css('line-height',$('.carousel-inner img').height()+'px');
			$(window).resize(function(){
				var oHeight = $('.carousel-inner img').eq(0).height() || 
							  $('.carousel-inner img').eq(1).height() ||
							  $('.carousel-inner img').eq(2).height()
				$('.carousel-control').css('line-height',oHeight+'px');
			});
		</script>
	</body>
	
</html>
